<template>
  <view
    class="nav_bar"
    :style="{
      paddingTop: globalState.systemInfo?.safeArea?.top + 'px',
    }"
  >
    <view class="content">
      <Image
        class="icon"
        :src="Back"
        @tap="handleToBack"
        v-if="props.showBack"
      />

      <!-- 占位 -->
      <view class="icon" @tap="handleToBack" v-else></view>

      <text class="title">{{ props.title }}</text>

      <!-- 占位 -->
      <view class="icon"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Back from "../assets/images/back.png";
import { useGlobalStore } from "../stores/globalStore";
import { safeNavigateBack } from "../utils/navigation.util";

// props
const props = defineProps({
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "",
  },
});

const globalState = useGlobalStore();

const handleToBack = () => {
  safeNavigateBack();
};
</script>

<style lang="scss">
.nav_bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #f5f6fa;

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0px 16px;

    .icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
    }

    .title {
      font-weight: 500;
      font-size: 18px;
      color: #000000;
      text-align: center;
      font-style: normal;
    }
  }
}
</style>
